<template>
	<view>
		<view class="contronal">
			<up-sticky zIndex="1" style="top: 0px;">
				<view class="myhead">
					<uni-icons type="back" size="25" color="#fff" class="icon" @click="navigBack"></uni-icons>
					<view class="search-box" @click="Navigator()">
						<up-icon name="search" size="25"></up-icon>
						<text>{{searchInput}}</text>
					</view>
					<view class="text">搜索</view>
				</view>
			</up-sticky>
			<scroll-view scroll-y="true" class="body" style="height: 80vh;">
				<view class="single">
					<view class="head">
						<text class="text">单曲</text>
						<view class="icon">
							<up-icon name="play-right-fill" size="18" color="#fff"></up-icon>
							<text>全部播放</text>
						</view>
					</view>
					<view class="list">
						<view class="item" v-for="(item,i) in searchResult" :key="i" @click="addAudio(item)">
							<image src="../../static/audio-icons/Playback_effect.png" class="list_icon"
								v-show="(urls[playing].mp3 == item.mp3)"></image>
							<view class="item_detail">
								<text>{{item.name}}</text>
								<text>{{item.singerName}} - {{item.name}}</text>
							</view>
							<image src="../../static/audio-icons/Add_Play.png" class="addplay"></image>
						</view>
					</view>
				</view>
				<!-- <view style="height: 100px;"></view> -->
			</scroll-view>
		</view>
		<!-- <view style="position: fixed;bottom: 0;background-color: rgba(47, 87, 122, 0.8);height:40px;width: 358px;"></view> -->
		<my-audio></my-audio>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations,
	} from 'vuex'
	export default {
		computed:{
			...mapState('audio',['urls','playing'])
		},
		data() {
			return {
				searchInput: '', //接收搜索值
				searchResult: [], //搜索结果
				isshow: false, //显示播放效果
			};
		},
		onLoad(val) {
			this.searchInput = val.searchInput;
			this.urls.forEach(item => {
				if (item.name.toLowerCase().includes(val.searchInput)) {
					this.searchResult.push(item);
				}else if (item.singerName.toLowerCase().includes(val.searchInput)) {
					this.searchResult.push(item);
				}
			});
		},
		methods: {
			...mapMutations('audio',['addAudio']),
			navigBack() {
				uni.navigateBack(); //后退
			},
			Navigator() {
				uni.navigateTo({
					url: '/subpkg/audio_search/audio_search?searchInput=' + this.searchInput
				})
			},
		}
	}
</script>

<style lang="scss">
	.contronal {
			background-image: url('../../static/bgimg.jpg');
			background-size: cover;
			background-position: center;
			height: 100vh;
	
			.myhead {
				position: relative;
				height: 180rpx;
				backdrop-filter: blur(20rpx);
				display: flex;
				justify-content: space-between;
				z-index: 1;
				border-bottom: 1rpx solid #fff;
	
				.icon {
					position: absolute;
					top: 60rpx;
					left: 20rpx;
					width: 60rpx;
					height: 60rpx;
					display: flex;
					line-height: 60rpx;
					border-radius: 30rpx;
	
					&:active {
						background-color: rgba(133, 133, 133, 0.5);
						transition: background-color 0.1s;
					}
				}
	
				.text {
					position: absolute;
					top: 60rpx;
					right: 30rpx;
					font-size: 40rpx;
					color: #fff;
	
					&:active {
						transform: scale(0.9);
						transition: transform 0.1s;
					}
				}
	
				.search-box {
					position: absolute;
					width: 520rpx;
					height: 60rpx;
					border: 1rpx solid #000000;
					background: linear-gradient(90deg, rgba(97, 207, 255, 0.5) 0%, rgba(46, 241, 220, 0.5) 50%, rgba(247, 82, 207, 0.5) 100%);
					backdrop-filter: blur(40rpx);
					top: 60rpx;
					left: 90rpx;
					border-radius: 30rpx;
					display: flex;
					line-height: 60rpx;
					z-index: 3;
	
					&>text {
						font-size: 32rpx;
						color: #fff;
						display: flex;
						line-height: 60rpx;
					}
				}
			}
			.body{
				.single{
					border: 1rpx solid #fff;
					height: auto;
					width: 640rpx;
					margin: 40rpx;
					border-radius: 20rpx;
					backdrop-filter: blur(5px);
					.head{
						height: 100rpx;
						display: flex;
						justify-content: space-between;
						border-bottom: 1rpx solid #eee;
						.text{
							margin-top: 20rpx;
							margin-left: 40rpx;
							color: #fff;
							font-size: 40rpx;
							font-weight: bold;
						}
						.icon{
							display: flex;
							margin-top: 20rpx;
							margin-right: 20rpx;
							line-height: 60rpx;
							height: 60rpx;
							border: 1rpx solid #fff;
							border-radius: 30rpx;
							padding: 0 20rpx;
							&:active{
								background-color: rgba(182, 182, 182, 0.5);
								transform: scale(0.98);
								transition: transform 1s;
							}
							text{
								color: #fff;
								font-size: 24rpx;
								font-weight: 100;
							}
						}
					}
					.item{
						height: 100rpx;
						display: flex;
						line-height: 100rpx;
						padding: 20rpx;
						position: relative;
						&:active{
							background-color: rgba(255, 255, 255, 0.2);
							backdrop-filter: blur(20rpx);
							transition: background-color 0.1s;
						}
						.list_icon {
							margin-top: 20rpx;
							margin-left: 7px;
							width: 50rpx;
							height: 50rpx;
						}
						.item_detail{
							display: flex;
							flex-direction: column;
							line-height: 70rpx;
							padding:0 20rpx;
							:nth-of-type(1){
								height: 60rpx;
								color: #f9f9f9;
								font-size: 32rpx;
								font-weight: bold;
							}
							:nth-of-type(2){
								line-height: 40rpx;
								color: #81e7d6;
								font-size: 24rpx;
							}
						}
						.addplay{
							width: 50rpx;
							height: 50rpx;
							position: absolute;
							right: 60rpx;
							top: 40rpx;
							opacity: 0.8;
							&:active{
								transform: scale(1.1);
								transition: transform 0.1s;
							}
						}
					}
				}
			}
		}
</style>